<template>
  <div class="goods" @scroll="scrollTop" ref="main">
    <van-nav-bar title="全部订单" @click-left="$router.push('/home')">
      <template #left>
        <van-icon name="arrow-left" size="20" color="black" />
      </template>
    </van-nav-bar>

    <div v-for="(item, index) in list" :key="index">
      <van-card
        :num="item.num"
        :price="item.originprice"
        :title="item.proname"
        :thumb="item.img1"
      />
      <div class="top" v-if="scrollTopData > 100" @click="backTop">
        <van-icon name="back-top" />
      </div>
    </div>
  </div>
</template>

<script>
import { orderList } from "../api/order";
export default {
  data() {
    return {
      list: [],
      scrollTopData: null,
      timer:null
    };
  },
  created() {
    orderList({
      //查看订单
      userid: localStorage.getItem("userid"),
    }).then((data) => {
      console.log(data);
      this.list = data.data.data;
    });
  },
  methods: {
    scrollTop() {
      this.scrollTopData = this.$refs.main.scrollTop;
      // console.log(this.scrollTopData);
    },
    backTop() {
      // this.$refs.main.scrollTop = 0;
      this.timer = setInterval(() => {
        if (this.$refs.main.scrollTop <= 0) {
          clearInterval(this.timer);
        }
        this.$refs.main.scrollTop -= 100;
      }, 10);
    },
  },
};
</script>

<style scoped>
.top {
  width: 0.3rem;
  height: 0.3rem;
  border: 1px solid black;
  border-radius: 50%;
  position: fixed;
  bottom: 1rem;
  right: 0.2rem;
  text-align: center;
  line-height: 0.3rem;
}
.goods {
  overflow: auto;
}
</style>